<template>
  <table v-if="isLogin === true">
    <tr>
      <th>ID</th>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
    </tr>
    <tr v-for="item in shopCartItems" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.num }}</td>
    </tr>
    <tr>
      <td colspan="2">合计</td>
      <td>共有商品{{count}}种，合计{{ totalPrice }}元</td>
      <td></td>
    </tr>
    <tr>
      <td><input type="text" v-model="newItem.id"></td>
      <td><input type="text" v-model="newItem.name"></td>
      <td><input type="text" v-model.number="newItem.price"></td>
      <td><input type="text" v-model.number="newItem.num">
        <button @click="add()">添加</button>
      </td>
    </tr>
  </table>
  <h3 v-else>请先登录</h3>
</template>

<script>
//导入 mapState 辅助函数
import { mapState, mapGetters } from 'vuex'
export default {
  name: "ShopCartComponents",
  data:function(){
    return {
      newItem:{
        id:null,price:null,num:null,name:null
      }
    }
  },
  computed: {
    //将需要使用的state中的属性，混入到当前组件的computed中
    ...mapState(['shopCartItems','isLogin']),
    //将vuex中的getter混入当前组件的computed中
    ...mapGetters(['count','totalPrice'])
    //通过this.$store.state 获取状态库中的数据
    // shopCartList:function(){
    //   return this.$store.state.shopCartItems
    // },
    // isLogin:function(){
    //   return this.$store.state.isLogin
    // },
    // totalPrice: function () {
    //   var totalPrice = 0;
      
    //   return totalPrice;
    // },
  },
  methods: {
    add(){
      //commit提交事件到vuex 
      this.$store.commit('addToShopCart',this.newItem)
      this.newItem = {id:null,price:null,num:null,name:null }
    }
  }
};
</script>